page {
  height: 100%;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100%;
  overflow-y: auto;
  padding: 20rpx 30rpx 40rpx 30rpx;
  background: #f7f7f7;
  .demand-info {
    border-radius: 20rpx;
    padding: 36rpx 44rpx 85rpx 44rpx;
    background-color: #ffffff;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      .name {
        font-size: 40rpx;
        color: #333333;
        font-weight: bold;
      }
      .status_new {
        margin-left: 30rpx;
        font-size: 24rpx;
        width: 85rpx;
        height: 35rpx;
        border-radius: 4rpx;
        padding: 8rpx 10rpx;
        display: flex;
        align-items: center;
        justify-content: center;
				white-space: nowrap;
      }
      .collect-img {
        margin-left: 20rpx;
        width: 42rpx;
        height: 42rpx;
      }
      .status0_new {
        background-color: #22b63b;
        color: #ffffff;
      }
      .status1_new {
        background-color: #e8e8e8;
        color: #666666;
      }
    }
    .main-content {
      margin-top: 30rpx;
      color: #999999;
      font-size: 26rpx;
      .text {
        margin-left: 26rpx;
        color: #555555;
      }
    }

    .main-img {
			display: flex;
			flex-wrap: wrap;
			.img {
				margin: 14rpx 10rpx 0 0;
				height: 100rpx;
				width: 100rpx;
				border-radius: 10rpx;
				image {
					height: 100rpx;
					width: 100rpx;
					border-radius: 10rpx;
				}
			}
		}

    .bottom-btn_new {
      margin-top: 55rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
			text-align: center;
      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 489rpx;
        height: 87rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
        color: #ffffff;
      }
      .click-btn {
        background: #0177fd;
      }
      .dis-btn {
        background: #c8c9cc;
      }
      .btn-contact {
        margin-top: 20rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ffa83e;
        width: 489rpx;
        height: 87rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
        color: #ffffff;
      }
    }
  }
  .join-info {
    margin-top: 26rpx;
    padding: 30rpx 44rpx 15rpx 44rpx;
    border-radius: 20rpx;
    background-color: #ffffff;
    .join-list {
      margin-top: 24rpx;
      padding: 20rpx 0 40rpx 0;
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .service-info {
          display: flex;
          flex-direction: column;
          .name-content {
            display: flex;
            align-items: center;
            .service-img{
              width: 60rpx;
              height: 60rpx;
              border-radius: 50%;
              margin-right: 15rpx;
            }
            .name {
              color: #333333;
              font-size: 28rpx;
              font-weight: bold;
            }
          }
          .service-text {
            margin-top: 14rpx;
            display: flex;
            text {
              min-width: 140rpx;
              height: 40rpx;
              border-radius: 4rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 8rpx 10rpx;
              background-color: #f4f9ff;
              color: #729dce;
              font-size: 24rpx;
            }
          }
        }
        .success-img {
          width: 96rpx;
          height: 117rpx;
        }
      }
      .service-des {
        margin-top: 40rpx;
        font-size: 24rpx;
        line-height: 36rpx;
        color: #666;
      }
      .service-img {
        display: flex;
        flex-wrap: wrap;
        .img {
          margin: 14rpx 10rpx 0 0;
          height: 100rpx;
          width: 100rpx;
          border-radius: 10rpx;
          image {
            height: 100rpx;
            width: 100rpx;
            border-radius: 10rpx;
          }
        }
      }
      .btn_new {
        margin-top: 34rpx;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        .hire-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 192rpx;
          height: 68rpx;
          background: #f4f4f4;
          border-radius: 86rpx;
          border: 1rpx solid #dcdcdc;
          margin-right: 22rpx;
        }
        .go-contact {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 192rpx;
          height: 68rpx;
          background: #ff6161;
          border-radius: 86rpx;
          color: #ffffff;
        }
      }
    }
    .empty-wrap {
      display: flex;
      flex-direction: column;
      padding-top: 40rpx;
      align-items: center;
      .empty-img {
        width: 160rpx;
        height: 160rpx;
      }

      .tips {
        margin-top: 18rpx;
        font-size: 30rpx;
        color: #999;
      }
    }
  }

  .img-notice {
    padding: 0 30rpx;
    padding-bottom: 30rpx;
    font-size: 22rpx;
    color: #999;
  }
}

.fixed-btn {
  .bottom-btn {
    position: fixed;
    bottom: 60rpx;
    left: 30rpx;
    padding: 0 30rpx;
    height: 180rpx;
    width: 690rpx;
    background-color: rgba(1, 1, 1, 0.8);
    border-radius: 6rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .btn-text {
      font-size: 34rpx;
      color: #fff;
      display: flex;
      flex-direction: column;
    }
    .btn {
      width: 208rpx;
      height: 80rpx;
      color: #fff;
      background: linear-gradient(90deg, #1c87f3 0%, #1ccff3 100%);
      font-size: 30rpx;
      border-radius: 55rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
